﻿@model Nutrapp.Models.RecipeModel

@{
    ViewBag.Title = "View";
}

<div class="panel">
    <div class="rec">
        <div class="rec_title">
            <p class="name_rec">@Model.Name</p>

        </div>
        <div id="picture">
            <img src="~/Upload/RecipeImage/@Model.Picture" alt="" style="height:100%; width:100%" />
        </div>
        <div class="list_items">


            <div class="ingr_block">
                <p class="list_title"><img src="~/Images/ingredient.png" alt=""> Ingredients</p>

                <ul style="list-style:none">

                    @foreach (var ingr in Model.IngredientLines)
                    {

                        <li>
                            <img src="~/Images/spoon.png" alt="">     @ingr.Ingredient.Name.ToString()
                            @ingr.Quantity.ToString()
                            @ingr.Unit1.Unit1.ToString()
                        </li>
                    }
                </ul>


            </div>
            <div class="nutr_block">
                <p class="list_title"><img src="~/Images/nutrition.png" alt="" style="height: 64px; width: 64px"> Nutrition</p>
                <ul style="list-style:none">

                    <li style="list-style:none"><img src="~/Images/jar.png" alt=""> Carbohydrate: @Model.Carbohydrate</li>
                    <li><img src="~/Images/jar.png" alt=""> Protein: @Model.Protein</li>
                    <li><img src="~/Images/jar.png" alt=""> Calories: @Model.Calories</li>
                    <li><img src="~/Images/jar.png" alt=""> Fat: @Model.Fat</li>

                </ul>
                <div class="price">
                    <img src="~/Images/price.png" alt="" style="height: 30px; width: 30px"> Price: @Model.Cost DKK
                </div>
            </div>

            <div>
            </div>
            </div>

        <div class="container">
            <form>

                <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=1 data-size="xs">

              
                <button type="reset" class="btn btn-default" onclick="show_alert()">Vote</button>     
                
            </form>

            <script>

                jQuery(document).ready(function () {
                    $(".rating-kv").rating();
                  
                });

                function show_alert() {

                    
                    
                    alert("kur");
                };
            </script>

        </div>  
        <div class="rec_instr">
            <p class="list_title"><img src="~/Images/instruction.png" alt=""> Recipe</p>
            <br>

           @Model.Instruction.ToString()
         </div>




        </div>
    </div>
